@tailwind base;
@tailwind components;
@tailwind utilities;

/* CSS变量定义 */
:root {
  /* 主色调 - 紫色系 */
  --primary-50: #faf5ff;
  --primary-100: #f3e8ff;
  --primary-200: #e9d5ff;
  --primary-300: #d8b4fe;
  --primary-400: #c084fc;
  --primary-500: #a855f7;
  --primary-600: #9333ea;
  --primary-700: #7c3aed;
  --primary-800: #6b21a8;
  --primary-900: #581c87;

  /* 背景色系 - 深色主题 */
  --background-50: #f8fafc;
  --background-100: #f1f5f9;
  --background-200: #e2e8f0;
  --background-300: #cbd5e1;
  --background-400: #94a3b8;
  --background-500: #64748b;
  --background-600: #475569;
  --background-700: #334155;
  --background-800: #1e293b;
  --background-900: #0f172a;
  --background-950: #020617;

  /* 功能色 */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
  --ai-generated: #8b5cf6;
  --fictional: #ec4899;

  /* 文字色 */
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  --text-inverse: #0f172a;

  /* 间距 */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  /* 过渡时间 */
  --transition-fast: 150ms;
  --transition-normal: 250ms;
  --transition-slow: 350ms;
}

/* 基础样式重置 */
@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background-900 text-text-primary font-sans;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    line-height: 1.6;
  }

  * {
    box-sizing: border-box;
  }

  /* 滚动条样式 */
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
  }

  /* 选择文本样式 */
  ::selection {
    background: var(--primary-500);
    color: white;
  }

  /* 焦点样式 */
  :focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
  }
}

/* 组件样式 */
@layer components {
  /* 电影卡片基础样式 */
  .movie-card {
    @apply rounded-xl border border-background-700 
           shadow-lg hover:shadow-xl transition-all duration-normal
           hover:-translate-y-1 hover:border-primary-500/30
           overflow-hidden;
  }

  .movie-card-container {
    @apply transition-all duration-normal;
  }

  .movie-card-container:hover .movie-card {
    @apply -translate-y-1 border-primary-500/30 shadow-xl;
  }

  /* 按钮基础样式 */
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg
           font-medium transition-all duration-normal
           focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-background-900;
  }

  .btn-primary {
    @apply btn bg-primary-600 text-white hover:bg-primary-700
           focus:ring-primary-500;
    box-shadow: 0 0 1px #a855f7, 0 0 2px #a855f7, 0 0 3px #a855f7, 0 0 4px #a855f7, inset 0 0 1px rgba(168, 85, 247, 0.3);
    text-shadow: 0 0 1px #a855f7;
  }

  .btn-secondary {
    @apply btn bg-background-700 text-text-primary border border-background-600
           hover:bg-background-600 hover:border-primary-500/50
           focus:ring-primary-500;
  }

  .btn-ai {
    @apply btn bg-ai-generated text-white hover:bg-ai-generated/90
           focus:ring-ai-generated;
    box-shadow: 0 0 1px #8b5cf6, 0 0 2px #8b5cf6, 0 0 3px #8b5cf6, 0 0 4px #8b5cf6, inset 0 0 1px rgba(139, 92, 246, 0.3);
    text-shadow: 0 0 1px #8b5cf6;
  }

  .btn-fictional {
    @apply btn bg-fictional text-white hover:bg-fictional/90
           focus:ring-fictional;
    box-shadow: 0 0 1px #ec4899, 0 0 2px #ec4899, 0 0 3px #ec4899, 0 0 4px #ec4899, inset 0 0 1px rgba(236, 72, 153, 0.3);
    text-shadow: 0 0 1px #ec4899;
  }

  /* 输入框样式 */
  .input {
    @apply bg-background-800 border border-background-600 rounded-lg px-3 py-2
           text-text-primary placeholder-text-muted
           focus:border-primary-500 focus:ring-1 focus:ring-primary-500
           transition-colors duration-normal;
  }

  /* 卡片样式 */
  .card {
    @apply bg-background-800 rounded-xl border border-background-700
           shadow-lg p-6;
  }

  /* 玻璃效果 */
  .glass {
    @apply glass-effect rounded-xl;
  }

  /* 全息边框 */
  .hologram-border {
    @apply border-hologram rounded-xl;
  }

  /* 渐变文字 */
  .gradient-text {
    @apply text-gradient;
  }

  /* 虚构内容标识 */
  .fictional-badge {
    @apply bg-gradient-fictional text-white px-2 py-1 rounded-md text-xs font-medium;
  }

  .ai-badge {
    @apply bg-gradient-ai text-white px-2 py-1 rounded-md text-xs font-medium;
  }
}

/* 工具类 */
@layer utilities {
  /* 与 Tailwind 插件重复的工具类已移除，避免冗余 */

  /* 动画类 */
  .animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
  }

  .animate-slide-up {
    animation: slideUp 0.3s ease-out;
  }

  .animate-scale-in {
    animation: scaleIn 0.2s ease-out;
  }

  /* 响应式容器 */
  .container-responsive {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* 电影网格 */
  .movie-grid {
    @apply grid gap-6;
  }
}

/* 自定义动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* 加载动画 */
.loading-film {
  @apply animate-film-rotate;
}

.loading-hologram {
  @apply animate-hologram;
}

/* 特殊效果 */
.neon-glow {
  @apply animate-neon-glow;
}

/* 响应式字体 */
@media (max-width: 640px) {
  .text-responsive {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
  }
}

@media (min-width: 641px) {
  .text-responsive {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
  }
}
